<template>
  <div class="page">
    <div class="flex align-center pointer" @click="$emit('back')">
      <img
        src="@/assets/images/back-dark.png"
        alt=""
        class="arrow"
        style="width: 16px; height: 14px"
      >
      <div class="page-brand" style="margin-bottom: 0">发布任务</div>
    </div>
    <div class="container" style="height: calc(100% - 115px)">
      <div class="grid-2 part-mt">
        <div class="left">
          <div class="grid-3">
            <div
              v-for="(item, index) in leftList"
              :key="item.name"
              :class="{ active: active === index }"
              class="pointer item g-card icon-box flex-c align-center"
              @click="handleChangeActive(index)"
            >
              <img :src="item.icon" alt="" class="icon icon-mr">
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
      <div class="g-card part-mt">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
        >
          <el-form-item label="任务名称" prop="taskName">
            <el-input
              v-model="ruleForm.taskName"
              placeholder="请输入任务名称"
              class="transparent semi"
            />
          </el-form-item>
          <el-form-item label="发布方式" prop="publishMethod">
            <div class="flex align-center">
              <div class="flex align-center">
                <mao-radio
                  v-model="ruleForm.publishMethod"
                  value="direct"
                  label="直接发布"
                />
                <el-popover
                  placement="top"
                  width="200"
                  trigger="hover"
                  content="可设置多账号，批量定时自动发布视频，托管发布。"
                >
                  <img
                    slot="reference"
                    src="@/assets/svg/qa.svg"
                    alt=""
                    class="qa pointer"
                  >
                </el-popover>
              </div>
              <div
                v-if="leftList[active].value === 'douyin'"
                class="flex align-center"
              >
                <mao-radio
                  v-model="ruleForm.publishMethod"
                  value="landpage"
                  label="落地页发布"
                />
                <el-popover
                  placement="top"
                  width="200"
                  trigger="hover"
                  content="可设置单个/多账号，立即发布或者定时发布视频。"
                >
                  <img
                    slot="reference"
                    src="@/assets/svg/qa.svg"
                    alt=""
                    class="qa pointer"
                  >
                </el-popover>
              </div>
            </div>
          </el-form-item>
          <el-form-item
            v-if="ruleForm.publishMethod === 'landpage'&&leftList[active].value==='douyin'"
            label="落地页"
            prop="landPageId"
          >
            <div class="flex align-center">
              <el-button
                class="lg-btn transparent"
                style="margin-right: 10px"
                @click="showLdyDrawer = true"
              >新建/管理</el-button>
              <div style="width: 300px">
                <el-select
                  v-model="ruleForm.landPageId"
                  class="f1 transparent"
                  placeholder="选择落地页"
                >
                  <el-option
                    v-for="item in luodiyeList"
                    :key="item.id"
                    :label="item.landingPageName"
                    :value="item.id"
                  />
                </el-select>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="g-card part-mt">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
        >
          <el-form-item label="选择视频" prop="videoIds">
            <el-button class="lg-btn transparent" @click="openVideoDrawer(0)">选择视频库</el-button>
            <el-button class="lg-btn transparent" @click="openVideoDrawer(1)">选择视频</el-button>
          </el-form-item>
          <div v-if="videoList.length||categoryList.length" style="padding-left: 120px;top:-20px" class="rel">
            <div v-if="videoType==='category'" class="flex align-center flex-wrap">
              <dir-item v-for="(item) in categoryList" :key="item.id" :editable="false" only-name :item="item" style="max-width:148px;margin-bottom: 10px;margin-right: 30px;" />
            </div>
            <div v-else class="flex flex-wrap">
              <div
                v-for="(item, index) in videoList"
                :key="index"
                class="video-item rel"
                style="margin-bottom: 30px;"
              >
                <div class="flex-c align-center flex-v w-100">
                  <div class="poster" style="overflow: hidden">
                    <MaoVideo :url="item.productUrl" :autoplay="false" />
                  </div>
                  <el-button size="mini" type="danger" style="margin-top: 5px;" @click="deleteVideo(index)">删除</el-button>
                </div>
              </div>
            </div>
          </div>
          <el-form-item label="视频标题" prop="videoTitle">
            <div class="flex align-center">
              <mao-radio
                v-model="videoTitleMethod"
                value="ai"
                label="AI一键生成"
              />
              <mao-radio
                v-model="videoTitleMethod"
                value="manual"
                label="添加标题"
              />
            </div>
            <div v-if="videoTitleMethod === 'ai'">
              <div
                v-show="!ruleForm.videoTitle"
                class="ai-box flex-c align-center"
                @click="showTitleAi = true"
              >
                暂无标题，使用
                <span class="link">AI一键生成</span>
              </div>
              <div
                v-show="ruleForm.videoTitle"
                class="ai-box scorll-box"
                style="
                  display: block;
                  padding: 5px 15px;
                  height: 120px;
                  overflow-y: auto;
                "
                @click="showTitleAi = true"
              >
                <div
                  v-for="(item, index) in videoTitle.list"
                  :key="index"
                  style="line-height: 1.75"
                >
                  <span class="index">{{ index + 1 }}</span>
                  {{ item }}
                </div>
              </div>
            </div>

            <div v-else>
              <el-input
                v-model="videoTitleInput"
                style="line-height: 1.75; color: #000"
                rows="5"
                type="textarea"
                resize="none"
                class="transparent"
                placeholder="请输入视频标题"
                @input="e=>handleInput(e,'videoTitle')"
              />
            </div>
          </el-form-item>
          <el-form-item label="视频话题" prop="videoTopic">
            <div class="flex align-center">
              <mao-radio
                v-model="videoTopicMethod"
                value="ai"
                label="AI一键生成"
              />
              <mao-radio
                v-model="videoTopicMethod"
                value="manual"
                label="添加话题"
              />
            </div>
            <div v-if="videoTopicMethod === 'ai'">
              <div
                v-show="!ruleForm.videoTopic"
                class="ai-box flex-c align-center"
                @click="showTitleAi = true"
              >
                暂无话题，使用
                <span class="link">AI一键生成</span>
              </div>
              <div
                v-show="ruleForm.videoTopic"
                class="ai-box scorll-box"
                style="
                  display: block;
                  padding: 5px 15px;
                  height: 120px;
                  overflow-y: auto;
                "
                @click="showTitleAi = true"
              >
                <div
                  v-for="(item, index) in videoTopic.list"
                  :key="index"
                  style="line-height: 1.75"
                >
                  <span class="index">{{ index + 1 }}</span>
                  #
                  {{ item }}
                </div>
              </div>
            </div>
            <div v-else>
              <el-input
                v-model="videoTopicInput"
                style="line-height: 1.75; color: #000"
                rows="5"
                type="textarea"
                resize="none"
                class="transparent"
                placeholder="请输入视频话题"
                @input="e=>handleInput(e,'videoTopic')"
              />
            </div>
          </el-form-item>
          <el-form-item
            v-if="leftList[active] && leftList[active].value === 'douyin'"
            label="挂载类型"
            prop="mountType"
          >
            <div class="flex align-center">
              <div class="flex align-center">
                <mao-radio
                  v-model="ruleForm.mountType"
                  value="poi"
                  label="POI地址"
                />
                <el-popover
                  placement="top"
                  width="200"
                  trigger="hover"
                  content="从抖音app搜索栏搜索地点，获取地址分享链接，例如：https://v.douyin.com/MnXe3S4/"
                >
                  <img
                    slot="reference"
                    src="@/assets/svg/qa.svg"
                    alt=""
                    class="qa pointer"
                  >
                </el-popover>
              </div>
              <div class="flex align-center">
                <mao-radio
                  v-model="ruleForm.mountType"
                  value="mini"
                  label="小程序"
                />
                <!-- <el-popover
                  placement="top"
                  width="200"
                  trigger="hover"
                  content="请使用客户端发布视频挂载“小程序”"
                >
                  <img
                    slot="reference"
                    src="@/assets/svg/qa.svg"
                    alt=""
                    class="qa pointer"
                  >
                </el-popover> -->
              </div>
            </div>
            <div v-if="ruleForm.mountType!=='mini'" class="flex align-center part-mt">
              <el-input v-model="mountTypeValue" class="transparent" style="margin-right: 5px;width: 500px;" />
              <el-button v-if="ruleForm.mountType==='poi'" class="rel" style="top: 2px;" type="primary" @click="trans">转换</el-button>
            </div>
          </el-form-item>
          <div v-if="ruleForm.mountType==='mini'">
            <el-form-item label="小程序ID" prop="miniId">
              <el-input v-model="mountTypeValue" class="transparent" placeholder="例如: ttef9161126716152ba" style="margin-right: 5px;width: 500px;" />
            </el-form-item>
            <el-form-item label="小程序名称" prop="microAppTitle">
              <el-input v-model="ruleForm.microAppTitle" class="transparent" placeholder="小程序标题" style="margin-right: 5px;width: 500px;" />
            </el-form-item>
            <el-form-item label="小程序路径" prop="microAppUrl">
              <el-input v-model="ruleForm.microAppUrl" class="transparent" placeholder="path/pages/index" style="margin-right: 5px;width: 500px;" />
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <div class="btm-fixed flex-c align-center" style="margin-top: 15px">
      <el-button
        v-if="!id"
        type="primary"
        size="small"
        @click="submit('add')"
      >生成发布计划</el-button>
      <el-button
        v-else
        type="primary"
        size="small"
        @click="submit('update')"
      >保存修改</el-button>
    </div>
    <TitleAi :show="showTitleAi" :db-data="dbData" @close="showTitleAi = false" @ok="getAi" />
    <VideoDrawer
      :show="showVideoDrawer"
      :active="videoActive"
      @close="showVideoDrawer = false"
      @ok="getVideoIds"
    />
    <AccountDrawer
      :type="type"
      :show="showAccountDrawer"
      @ok="getAccountIds"
      @close="showAccountDrawer = false"
    />
    <luodiye
      :show="showLdyDrawer"
      @ok="getLdy"
      @close="showLdyDrawer = false"
    />
  </div>
</template>
<script>
import MaoRadio from '@/components/MaoRadio/index.vue'
import TitleAi from '@/views/market/video/components/TitleAi.vue'
import VideoDrawer from '@/views/market/video/components/VideoDrawer.vue'
import AccountDrawer from '@/views/market/video/components/AccountDrawer.vue'
import DirItem from '@/views/element/index/components/DirItem.vue'

import MaoVideo from '@/components/MaoVideo'
import luodiye from './Luodiye.vue'

//
import { addTask, getDetail, updateTask, transPoi, getLdyList } from '@/api/publish'
import { getList as getVideoList, getCategoryList } from '@/api/product'
import { getList as getAccountList } from '@/api/auth'
import { getGroupList } from '@/api/group'

export default {
  components: { MaoRadio, TitleAi, VideoDrawer, AccountDrawer, MaoVideo, luodiye, DirItem },
  props: {
    taskType: {
      type: String,
      default: '1'
    },
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      bProps: {
        label: 'name',
        value: 'id'
      },
      categoryList: [],
      dbData: {},
      ruleForm: {
        taskName: '',
        publishMethod: '',
        videoIds: '',
        accountIds: '',
        videoTitle: '',
        mountType: '',
        publishTime: '',
        videoSync: true,
        landPageId: '',
        microAppTitle: '',
        microAppUrl: ''
      },
      rules: {
        taskName: [{ required: true, message: '此项必填', trigger: 'blur' }],
        publishMethod: [
          { required: true, message: '此项必填', trigger: 'blur' }
        ],
        videoIds: [{ required: true, message: '此项必填', trigger: 'blur' }],
        accountIds: [{ required: true, message: '此项必填', trigger: 'blur' }],
        videoTitle: [{ required: true, message: '此项必填', trigger: 'blur' }],
        videoTopic: [{ required: true, message: '此项必填', trigger: 'blur' }],
        publishTime: [{ required: true, message: '此项必填', trigger: 'blur' }]
        // videoSync: [{ required: true, message: '此项必填', trigger: 'blur' }]
      },
      leftList: [
        {
          icon: require('@/assets/images/auth/douyin.png'),
          name: '抖音',
          value: 'douyin'
        },
        {
          icon: require('@/assets/images/auth/xiaohongshu.png'),
          name: '小红书',
          value: 'xiaohongshu'
        }
      ],
      active: 0,
      showTitleAi: false,
      showVideoDrawer: false,
      showAccountDrawer: false,
      videoActive: 0,
      videoTitleMethod: 'ai',
      videoTopicMethod: 'ai',
      type: 'account',
      publishTime: [],
      videoList: [],
      videoType: '',
      accountList: [],
      accountType: '',
      mountTypeValue: '',
      videoTitle: {},
      videoTopic: {},
      videoTitleInput: '',
      videoTopicInput: '',
      allVideos: [],
      allAccounts: [],
      groupList: [],
      groupId: [],
      bList: [],
      productLibraryId: [],
      isLibrary: 0,
      showLdyDrawer: false,
      luodiyeList: []
    }
  },
  async created() {
    this.getLdy()
    await this.getGroupList()
    if (this.id) {
      this.handleUpdate()
    }
  },
  methods: {
    handleInput(e, name) {
      this.ruleForm[name] = e
      this[name].list = e.split('\n')
      this[name + 'Input'] = this[name].list.join('\n')
    },
    async handleChangeActive(index) {
      this.active = index
      if (index === 1) {
        this.ruleForm.mountType = ''
      }
    },
    async getLdy() {
      const res = await getLdyList()
      if (res.success) {
        this.luodiyeList = res.result.records || []
      }
    },
    async handleGroupChange(ids = []) {
      const funcs = []
      for (let i = 0; i < ids.length; i++) {
        const item = ids[i]
        funcs.push(await this.initListByGroup(item.toString()))
      }
      const resultList = []
      Promise.all(funcs).then((res) => {
        res.forEach((item) => {
          if (Array.isArray(item) && item.length) {
            resultList.push(...item)
          }
        })
        this.getAccountIds(
          {
            value: resultList.map(item => item.id.toString()).join(','),
            list: resultList,
            type: 'group'
          }
        )
      })
    },
    async initListByGroup(id = '') {
      return new Promise((resolve) => {
        if (id) {
          getAccountList({ groupId: id }).then((res) => {
            if (res.success) {
              const { records } = res.result
              resolve(records)
            } else {
              this.$message.error(res.message)
              resolve([])
            }
          })
        }
      })
    },
    async getGroupList() {
      return new Promise(resolve => {
        getGroupList().then(res => {
          if (res.success) {
            this.groupList = res.result.records.map((item) => {
              item.id = item.id.toString()
              return item
            })
          } else {
            this.$error(res.message)
          }
          resolve()
        })
      })
    },
    delCategory(index) {
      this.categoryList.splice(index, 1)
      this.productLibraryId = this.categoryList.map(item => item.id.toString())
    },
    async handleUpdate() {
      await this.init()
      await this.getAllVideo()
      await this.getAllAccount()
      const { videoIds, accountIds, isLibrary, productLibraryId } = this.dbData
      this.videoList = this.allVideos.filter(item => {
        const videoIdList = videoIds.split(',') || []
        return videoIdList.includes(item.id)
      })
      this.accountList = this.allAccounts.filter(item => {
        const accountList = accountIds.split(',') || []
        return accountList.includes(item.id)
      })
      this.isLibrary = isLibrary
      if (isLibrary === 1) {
        if (productLibraryId) {
          if (typeof productLibraryId === 'string') {
            this.productLibraryId = productLibraryId.split(',')
          } else {
            this.productLibraryId = [productLibraryId.toString()]
          }
        }
        this.videoType = 'category'
        const _categoryList = await this.getAllCategory()
        const categoryList = [{ categoryName: '通用素材', id: '0' }, ..._categoryList]
        this.categoryList = categoryList.filter(item => this.productLibraryId.includes(item.id.toString())).map(item => {
          item.checked = true
          item.active = true
          return item
        })
      } else {
        this.videoType = 'video'
      }
    },
    getAllCategory() {
      return new Promise(resolve => {
        getCategoryList().then(res => {
          if (res.success) {
            resolve(res.result.records)
          } else {
            resolve([])
          }
        })
      })
    },
    async deleteVideo(index) {
      this.videoList.splice(index, 1)
      const value = this.videoList.map(item => item.id.toString()).join(',')
      console.log('deleteVideo:', value)
      this.$set(this.ruleForm, 'videoIds', value)
    },
    async delAccount(index) {
      this.accountList.splice(index, 1)
      const value = this.accountList.map(item => item.id.toString()).join(',')
      this.$set(this.ruleForm, 'accountIds', value)
    },
    async getAllVideo() {
      const res = await getVideoList()
      if (res.success) {
        this.allVideos = (res.result.records || []).map(item => {
          item.id = item.id.toString()
          return item
        })
      } else {
        this.$message.error(res.message)
      }
    },
    async getAllAccount() {
      const res = await getAccountList()
      if (res.success) {
        this.allAccounts = (res.result.records || []).map(item => {
          item.id = item.id.toString()
          return item
        })
      } else {
        this.$message.error(res.message)
      }
    },
    async init() {
      const res = await getDetail({ id: this.id })
      if (res.success) {
        this.dbData = res.result
        const { videoTitle, videoTopic, platform } = this.dbData
        if (platform) {
          this.active = this.leftList.findIndex(item => item.value === platform)
        }

        if (videoTitle) {
          this.videoTitle.list = videoTitle.split('&*&*')
          this.ruleForm.videoTitle = this.videoTitleInput = this.videoTitle.list.join('\n')
        }
        if (videoTopic) {
          this.videoTopic.list = videoTopic.split('&*&*')
          this.ruleForm.videoTopic = this.videoTopicInput = this.videoTopic.list.join('\n')
        }

        for (const key in this.dbData) {
          this.$set(this.ruleForm, key, (this.dbData[key] || ''))
        }
        this.ruleForm.videoSync = this.dbData.videoSync === 1
        this.ruleForm.topicPosition = (this.dbData.topicPosition || this.dbData.topicPosition === 0) ? this.dbData.topicPosition.toString() : ''
        const { mountType } = this.dbData
        this.ruleForm.mountType = mountType
        if (mountType === 'poi') {
          this.mountTypeValue = this.dbData.poiAddress || ''
        }
        if (mountType === 'product') {
          this.mountTypeValue = this.dbData.productShowcase || ''
        }
        if (mountType === 'mini') {
          this.mountTypeValue = this.dbData.miniProgram || ''
        }
      } else {
        this.$message.error(res.message)
      }
    },
    async trans() {
      if (!this.mountTypeValue.trim()) {
        this.$message.warning('请输入poi地址')
        return
      }
      const res = await transPoi({
        url: this.mountTypeValue
      })
      if (res.success) {
        this.$message.success('转换成功')
        this.mountTypeValue = res.result
      } else {
        this.$message.error(res.message)
      }
    },
    openVideoDrawer(index) {
      this.showVideoDrawer = true
      this.videoActive = index
    },
    getVideoIds(param = {}) {
      const { value, list, type } = param
      this.showVideoDrawer = false
      this.$set(this.ruleForm, 'videoIds', value)

      this.videoType = type
      if (type === 'category') {
        this.productLibraryId = list.map(item => item.id.toString())
        this.isLibrary = 1
        this.categoryList = list
      } else {
        this.productLibraryId = []
        this.isLibrary = 0
        this.videoList = list
      }
    },
    getAccountIds(param = {}) {
      this.showAccountDrawer = false
      const { value, list, type } = param
      this.accountList = list
      this.accountType = type
      if (type !== 'group') {
        this.groupId = []
      }
      this.$set(this.ruleForm, 'accountIds', value)
    },
    getAi(list = []) {
      this.videoTitle = list[0] || {}
      this.videoTopic = list[1] || {}
      const aiForm = list[2] || {}

      this.$set(this.ruleForm, this.videoTitle.name, this.videoTitle.list.join('\n'))
      this.$set(this.ruleForm, this.videoTopic.name, this.videoTopic.list.join('\n'))
      this.$set(this.ruleForm, 'topicPosition', aiForm.topicPosition || '')
      this.showTitleAi = false
    },
    getTime(list = []) {
      this.$set(this.ruleForm, 'publishTime', list.join(','))
    },
    submit(submitType = 'add') {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          let poiAddress = ''
          let miniProgram = ''
          let productShowcase = ''
          if (this.ruleForm.mountType === 'poi') {
            poiAddress = this.mountTypeValue
            this.ruleForm.microAppTitle = ''
            this.ruleForm.microAppUrl = ''
          }
          if (this.ruleForm.mountType === 'mini') {
            miniProgram = this.mountTypeValue
          }
          if (this.ruleForm.mountType === 'product') {
            productShowcase = this.mountTypeValue
            this.ruleForm.microAppTitle = ''
            this.ruleForm.microAppUrl = ''
          }
          const videoTitle = this.ruleForm.videoTitle.split('\n').join('&*&*')
          const videoTopic = this.ruleForm.videoTopic.split('\n').join('&*&*')
          let tid = ''
          if (this.ruleForm.tid && this.ruleForm.tid.length) {
            tid = this.ruleForm.tid[1] || ''
          }

          const param = {
            ...this.ruleForm,
            tid,
            videoTitle,
            videoTopic,
            poiAddress,
            miniProgram,
            productShowcase,
            videoSync: this.ruleForm.videoSync ? 1 : 0,
            taskType: this.taskType,
            platform: this.leftList[this.active].value,
            groupId: this.groupId.join(','),
            productLibraryId: this.productLibraryId.join(','),
            isLibrary: this.isLibrary
          }
          console.log('param', param)
          let res = {}
          if (submitType === 'add') {
            res = await addTask(param)
          } else {
            res = await updateTask({ ...param, id: this.id })
          }
          if (res.success) {
            this.$message.success('操作成功')
            this.$emit('back')
          } else {
            this.$message.error(res.message)
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.dark-placeholder{
  >>> .el-input__inner{
    border-radius: 5px !important;
  }
}
.el-checkbox{
  margin-right: 15px;
}
.index{
  color: #006FFF;
}
.btn-mr{
  margin-right: 35px;
}
.lg-btn{
  width: 150px;

}
.video-item {
    width: 140px;
    height: 250px;
    margin-bottom: 30px;
    margin-right: 30px;
    .poster {
      width: 140px;
      height: 220px;
    }
  }
.dir-img {
    width: 70px;
    margin-bottom: 10px;
  }
  .dir-name {
    font-size: 20px;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
  }
.ai-box {
  width: 500px;
  height: 100px;
  border-radius: 5px;
  background: rgba(166, 166, 166, 0.1);
  border: 1px solid rgba(216, 224, 240, 1);
  box-shadow: 0px 1px 2px rgba(184, 200, 224, 0.22);
  margin-top: 20px;
}
.time-box {
  border-radius: 5px;
  margin-top: 10px;
  background: rgba(166, 166, 166, 0.1);
  border: 1px solid rgba(216, 224, 240, 1);
  box-shadow: 0px 1px 2px rgba(184, 200, 224, 0.22);
  box-sizing: border-box;
  padding: 16px;
  .time-box-checklist{
    display: grid;
    grid-template-columns: repeat(12,1fr);
  }
}
.sub {
  font-size: 14px;
  font-weight: 400;
  color: rgba(128, 128, 128, 1);
}
.el-form-item {
  margin-bottom:39px;
  &:last-child {
    margin-bottom: 0;
  }
}
.part-mt {
  margin-top: 30px;
}
.semi {
  width: 500px;
}
.qa {
  width: 14px;
  height: 14px;
  position: relative;
  right: 45px;
    top: 2px;
}
.arrow {
  width: 11px;
  height: 7px;
  margin-right: 6px;
}
.icon-box {
  font-size: 20px;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  height: 120px;
  .icon {
    margin-right: 20px;
  }
}
.icon-box.active {
  background: linear-gradient(
    135deg,
    rgba(47, 76, 221, 1),
    rgba(150, 85, 242, 1)
  );
  color: #fff;
}
.icon {
  width: 70px;
  height: 70px;
}
.icon-mr {
  margin-right: 50px;
}
.sicon-mr {
  margin-right: 30px;
}
.text-box {
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.item {
  font-size: 20px;
  white-space: nowrap;
}
.grid-2 {
  display: grid;
  grid-template-columns: 60% 1fr;
  .left {
    .grid-3 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      .item {
        margin-right:25px;
      }
    }
  }
}
</style>

